<template>
  <!-- 这是最外层容器，会有一个默认的宽度 270px，但是如果用户传递的宽度，那么就使用用户传递的 -->
  <div class="timmy-card" :style="width ? { width: width + 'px' } : {}">
    <!-- 1. 卡片图片 -->
    <div class="timmy-card-img" :style="imgHeight ? { height: imgHeight + 'px' } : {}">
      <img :src="imgSrc" alt="img" />
    </div>

    <!-- 2. 卡片描述 -->
    <div>
      <div
        v-if="summary"
        class="timmy-card-summary"
        @mouseenter="showTooltip"
        @mouseleave="hideTooltip"
      >
        <div>{{ summary }}</div>
        <Transition name="fade">
          <div v-if="isTooltipVisible" class="custom-tooltip">
            {{ summary }}
          </div>
        </Transition>
      </div>
      <div v-else class="timmy-card-summary">
        <slot />
      </div>
    </div>

    <!-- 3. 卡片的 footer -->
    <!-- 最后的 footer 仅仅提供一个插槽，至于内容以及样式由用户自己来决定 -->
    <div class="timmy-card-footer" v-if="$slots.footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from "vue";
  import type { CardProps } from "./props.ts";
  defineOptions({
    name: "Timmy-Card"
  });
  const props = defineProps<CardProps>();

  const computedCardStyle = computed(() => ({
    ...(props.width ? { width: `${props.width}px` } : {})
  }));

  const isTooltipVisible = ref(false);
  const showTooltip = ()=> {
    isTooltipVisible.value = true;
  }
  const hideTooltip = ()=> {
    isTooltipVisible.value = false;
  }

  onMounted(()=> {
    console.log("computedCardStyle", computedCardStyle)
  })
</script>

<style scoped>

</style>
